<script setup lang="ts">
import OverView from './components/overview.vue'
import usePx2rempx from '@/hook/px2rempx'
import SalesFunnel from './components/sales-funnel.vue'
import MonthOrderSales, { OrderSalesType } from './components/month-order-sales.vue'
import SalesLeads from './components/sales-leads.vue'
import StoreCustomers from './components/store-customers.vue'
import TestDrive from './components/test-drive.vue'
import InventoryStatus from './components/inventory-status.vue'
import { storeToRefs } from 'pinia'
import useUserStore from '@/stores/user'
import useFilterStore from '@/stores/filter'

const { remPx: gutter } = usePx2rempx(8)

const filterStore = useFilterStore()

const { dateLoading } = storeToRefs(filterStore)

const userStore = useUserStore()

const { userUpdate } = storeToRefs(userStore)
</script>

<template>
  <main :key="userUpdate">
    <a-spin :spinning="dateLoading" size="large" wrapperClassName="cus-spin">
      <a-row :gutter="[gutter, gutter]" align="start">
        <a-col :span="24">
          <Header />
        </a-col>
        <a-col :span="24">
          <OverView />
        </a-col>
        <!--  -->
        <a-col :span="24" flex="1">
          <a-row :gutter="[gutter, gutter]">
            <a-col :span="8">
              <SalesFunnel />
            </a-col>
            <a-col :span="8">
              <MonthOrderSales :type="OrderSalesType.ORDER" />
            </a-col>
            <a-col :span="8">
              <MonthOrderSales :type="OrderSalesType.SALES" />
            </a-col>
          </a-row>
        </a-col>
        <!--  -->
        <a-col :span="24">
          <a-row :gutter="[gutter, gutter]">
            <!--  -->
            <a-col :span="8">
              <a-row :gutter="[gutter, gutter]">
                <a-col :span="24">
                  <SalesLeads />
                </a-col>
                <a-col :span="24">
                  <StoreCustomers />
                </a-col>
                <a-col :span="24">
                  <TestDrive />
                </a-col>
              </a-row>
            </a-col>
            <!--  -->
            <a-col :span="16">
              <InventoryStatus />
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-spin>
  </main>
</template>

<style lang="less">
.cus-spin {
  .ant-spin {
    max-height: none !important;
  }
}
</style>

<style lang="less" scoped>
main {
  height: 100%;
  padding: 0 16px 16px;
}
</style>
